<template>
    <div class="container">
        <div class="input_modal">
            <div class="input-item">
                <span>姓名：</span>
                <el-input
                        v-model="nameLike"
                        placeholder="请输入"
                        class="proName"
                        style="width:100px"
                />
            </div>

            <div class="input-item">
                <span>性别：</span>
                <el-select
                        v-model='sex'
                        placeholder='-请选择-'
                        style="height: 30px;  line-height: 30px;width:200px;"
                >
                    <el-option
                            v-for="item in sexList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                    ></el-option>
                </el-select>
            </div>
            <el-button
                    type="primary"
                    size="medium"
                    @click="getList()"
            >查询</el-button>
        </div>
        <div class="table_con">
            <el-table
                    v-loading="loading"
                    :data="tableData"
                    :border='true'
            >
                <el-table-column
                        type="index"
                        width="50"
                        label="序号"
                >
                </el-table-column>
                <!--<el-table-column-->
                        <!--prop="mobile"-->
                        <!--:formatter="formatter"-->
                        <!--label="昵称"-->
                <!--&gt;</el-table-column>-->
                <el-table-column
                        prop="name"
                        :formatter="formatter"
                        label="姓名"
                ></el-table-column>
                <el-table-column
                        prop="sex"
                        label="性别"
                ></el-table-column>
                <el-table-column
                        prop="nation"
                        label="民族"
                ></el-table-column>
                <el-table-column
                        prop="height"
                        label="身高"
                ></el-table-column>
                <el-table-column
                        prop="weight"
                        label="体重"
                ></el-table-column>
                <el-table-column
                        prop="diplomas"
                        label="学历"
                ></el-table-column>
                <el-table-column
                        prop="birthDate"
                        label="出生年月"
                ></el-table-column>
                <el-table-column
                        prop="phone"
                        label="联系方式"
                ></el-table-column>
                <el-table-column
                        prop=""
                        label="操作"
                        width='240'
                >
                    <template slot-scope="scope">
                        <el-button
                                type="primary"
                                size="mini"
                                class="el-icon-edit"
                                @click="$router.push('/formDetail?id='+scope.row.id)"
                        >查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="pagination">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageIndex"
                    :page-size="pageSize"
                    :page-sizes='[10,20,30,40]'
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageCount"
            >
            </el-pagination>
        </div>

    </div>
</template>

<script>
    let CONSTANT = require("../../constant/constant.js");
    let common = require("../../common.js");
    export default {
        data() {
            return {
                tableData: [],
                pageCount: null,
                pageIndex: 1,
                pageSize: 10,
                loading: true,
                nameLike: '',
                sex: '',
                sexList: [{id: '', name: '全部'},{id: '男', name: '男'}, {id: '女', name: '女'}],
            };
        },
        mounted() {
            this.getList();
        },
        methods: {
            formatter(row, column, cellValue) {
                return cellValue ? cellValue : "- -";
            },
            formatter1(row, column, cellValue) {
                return cellValue ? cellValue : 0;
            },
            getList: function() {
                let url = CONSTANT.URL.reportList;
                let data = {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    nameLike: this.nameLike,
                    sex: this.sex,
                };
                this.loading = true;
                common.post(url, data, res => {
                    this.loading = false;
                    this.tableData = res.data.bussData;
                    this.pageCount = res.data.count;
                });
            },
            handleClickTab(tab, e) {},
            search: function(e) {
                if (e.keyCode == 13) {
                    this.pageIndex = 1;
                    this.getList();
                }
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.pageIndex = val;
                this.getList();
            },
            linkTo() {
                this.$router.push("goodEdit");
            }
        },
        filters: {
            formatStatus(value) {
                var list = [];
                list["y"] = "上架";
                list["n"] = "下架";
                if (value) {
                    return list[value];
                } else {
                    return "--";
                }
            }
        }
    };
</script>
